<template>
  <div class="insure" style="margin: 20px">
    <div v-hasPermi="['insurance:uploadPersonnelList:nextStep']">
    <div style="margin: 20px 0">
      投保信息
    </div>
    <div style="border-bottom: 1px solid #f1f1f1;margin: 20px 0"></div>
    <div style="width: 700px;margin: 0 auto" >
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">

        <el-row>
          <el-col :span="18">
            <el-form-item label="投保企业全称" prop="name">
              <!--        <el-input v-model="form.name" placeholder="请输入"/>-->
              <el-select v-model="form.name" placeholder="请选择" style="width: 320px" :filterable="true"
                         :reserve-keyword="true" :filter-method="search" v-loadmore="loadMore" @click.native="getSelects">
                <el-option
                    v-for="item in employerList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    @click.native="getSelect(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div style="color: #00afff;height: 35px;line-height: 35px" @click="getApplicant">新增投保企业</div>
          </el-col>
        </el-row>

        <el-form-item label="统一社会信用代码" prop="credit_no">
          <el-input v-model="form.credit_no" placeholder="请输入" readonly/>
        </el-form-item>
        <el-row>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投保联系人" prop="contact">
              <el-input v-model="form.contact" placeholder="请输入" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投保联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入" readonly/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="投保通讯地址" prop="mail_address">
          <el-input v-model="form.mail_address" placeholder="请输入" readonly/>
        </el-form-item>
        <el-form-item label="投保邮编" prop="email_code">
          <el-input v-model="form.email_code" placeholder="请输入" readonly/>
        </el-form-item>
        <el-form-item label="投保邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入" readonly/>
        </el-form-item>
        <!--      <el-form-item label="备注" prop="remark ">-->
        <!--        <el-input v-model="form.remark " placeholder="请输入"/>-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="营业范围" prop="business_scope">-->
        <!--        <el-input v-model="form.business_scope" placeholder="请输入"/>-->
        <!--      </el-form-item>-->
      </el-form>

    </div>
    </div>
    <div v-hasPermi="['insurance:uploadPersonnelList:information']">
    <div style="margin: 20px 0">
      被保信息
    </div>
    <div style="border-bottom: 1px solid #f1f1f1;margin: 20px 0"></div>
    <div style="width: 800px;margin: 0 auto">
      <el-form ref="form" :model="form1" :rules="rules1" label-width="170px">
<!--        <el-form-item label="被保企业" prop="stime">-->
<!--          <el-radio-group v-model="form1.resource" @change="getInsured">-->
<!--            <el-radio  label="同投保企业" ></el-radio>-->
<!--            <el-radio  label="非投保企业"></el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--       <div v-if="form1.resource=='非投保企业'">-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="生效日期" prop="stime">
              <el-date-picker
                  ref="stime"
                  v-model="form1.stime"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="expireTimeOption"
                  value-format="yyyy-MM-dd" @change="getTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效期止" prop="etime">
              <el-date-picker
                  ref="etime"
                  v-model="form1.etime"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="expireTimeOption1"
                  value-format="yyyy-MM-dd" @change="getTime1">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="被保企业全称" prop="name">
              <!--        <el-input v-model="form.name" placeholder="请输入"/>-->
              <el-select  ref="name1" v-model="form1.name" placeholder="请选择" style="width: 320px" :filterable="true"
                         :reserve-keyword="true" :filter-method="search1" v-loadmore="loadMore1" @click.native="getSelects1">
                <el-option
                    v-for="item in employerList1"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    @click.native="getSelect1(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div style="color: #00afff;height: 35px;line-height: 35px" @click="getApplicant1">新增被保险人信息</div>
          </el-col>
        </el-row>
        <el-form-item label="统一社会信用代码" prop="credit_no">
          <el-input v-model="form1.credit_no" placeholder="请输入" readonly/>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="被保联系人" prop="contact">
              <el-input v-model="form1.contact" placeholder="请输入" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被保联系电话" prop="phone">
              <el-input v-model="form1.phone" placeholder="请输入" readonly/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="被保通讯地址" prop="mail_address">
          <el-input v-model="form1.mail_address" placeholder="请输入" readonly/>
        </el-form-item>
        <el-form-item label="被保邮编" prop="email_code">
          <el-input v-model="form1.email_code" placeholder="请输入" readonly/>
        </el-form-item>
        <el-form-item label="被保邮箱" prop="email">
          <el-input v-model="form1.email" placeholder="请输入" readonly/>
        </el-form-item>
        <!--      <el-form-item label="备注" prop="remark ">-->
        <!--        <el-input v-model="form.remark " placeholder="请输入"/>-->
        <!--      </el-form-item>-->
        <el-form-item label="被保营业范围" prop="business_scope">
          <el-input v-model="form1.business_scope" placeholder="请输入" readonly/>
        </el-form-item>
<!--       </div>-->
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" v-hasPermi="['insurance:insure:Submit']" style="width: 150px" @click="getSubmit">提交</el-button>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import {get_policy_holder, get_edit_company,creat_insurance} from '@/api/policyHolder/ApplicantInformation'

export default {
  name: "insure",
  data() {
    return {
      //  方案id
      pid: '',

      form1: {
        resource:'同投保企业'
      },
      form: {

      },
      // 表单校验
      rules: {
        name: [
          {required: false, message: "名称不能为空", trigger: "blur"}
        ],
        credit_no: [
          {required: false, message: "统一社会信用代码不能为空", trigger: "blur"}
        ],
        contact: [
          {required: false, message: "联系人不能为空", trigger: "blur"}
        ],
        phone: [
          {required: true, message: "电话不能为空", trigger: "blur"},
          {pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '请输入正确的联系人电话'}
        ],
        mail_address: [
          {required: false, message: "通讯地址不能为空", trigger: "blur"}
        ],
        email_code: [
          {required: false, message: "邮编不能为空", trigger: "blur"}
        ],
        email: [
          {required: false, message: '邮箱号码', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱号码', trigger: ['blur', 'change']}
        ],


      },
      rules1: {
        name: [
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        credit_no: [
          {required: false, message: "统一社会信用代码不能为空", trigger: "blur"}
        ],
        contact: [
          {required: false, message: "联系人不能为空", trigger: "blur"}
        ],
        phone: [
          {required: true, message: "电话不能为空", trigger: "blur"},
          {pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '请输入正确的联系人电话'}
        ],
        mail_address: [
          {required: false, message: "通讯地址不能为空", trigger: "blur"}
        ],
        email_code: [
          {required: false, message: "邮编不能为空", trigger: "blur"}
        ],
        email: [
          {required: false, message: '邮箱号码', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱号码', trigger: ['blur', 'change']}
        ],
        stime: [
          {required: true, message: "生效日期不能为空", trigger: "blur"}
        ],
        etime: [
          {required: true, message: '有效日期不能为空', trigger: 'blur'},

        ],

      },
      employerList: [],//投保人列表
      employerList1: [],//被保人列表
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        user_id: null,
        role_id: null,
        type: 1,//投保单位
        name: null,
      },
      // 查询参数
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        user_id: null,
        role_id: null,
        type: 2,//投保单位
        name: null,
      },
      forms:{
        user_id:'',//当前用户id
        plan_id:'',//方案id
        company_id:'',//投保人id
        by_company_id:'',// 被保险人id,若为同一单位，传投保人id
        start_time:'',//保险开始时间,
        end_time:'',//保险时间截止
      },
      //生效日期判断当前日期之前的不能选
      expireTimeOption: {
        disabledDate(date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
      },
      //有效日期判断当前日期之前的不能选
      expireTimeOption1: {
        disabledDate(date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
      },


    }
  },
  mounted() {
    // console.log('235326')
  },

  methods: {


    //点击跳转投保人管理页面
    getApplicant() {
      this.$router.push({
        path: '/policyHolder'
      })
    },
    //选择投保企业
    getSelects(){

      this.getList();
    },
    getSelects1(){
      this.getList1();
    },
    //点击跳转到被保险人信息页面
    getApplicant1(){
      this.$router.push({
        path: '/policyHolder1'
      })
    },
    //选择被保企业
    getInsured(e){
      // console.log('e',e)
      if(e=='同投保企业'){
        this.forms.by_company_id=this.forms.company_id
      }
    },
    //选择生效日期
    getTime(e){
      this.forms.start_time=e
    },
    //选择有效日期
    getTime1(e){
      this.forms.end_time=e
    },
    // 表单重置
    reset() {
      this.form = {
        user_id: this.queryParams.user_id,// 的当前登录人id
        id: null,//数据id，添加时传空，编辑时传具体id
        type: 1,//1投保单位  2被投保单位
        name: null,//公司名称
        credit_no: null,// 统一社会信用代码
        contact: null,//联系人
        phone: null,//联系人电话
        mail_address: null,//通讯地址
        email_code: null,//邮编
        email: null,//邮箱号码
        industry: null,// 行业类别
        business_scope: null,// 营业范围
        business_img: null,// 营业执照
        remark: null,// 备注,


      };
      this.form1 = {
        user_id: this.queryParams.user_id,// 的当前登录人id
        id: null,//数据id，添加时传空，编辑时传具体id
        type: 1,//1投保单位  2被投保单位
        name: null,//公司名称
        credit_no: null,// 统一社会信用代码
        contact: null,//联系人
        phone: null,//联系人电话
        mail_address: null,//通讯地址
        email_code: null,//邮编
        email: null,//邮箱号码
        industry: null,// 行业类别
        business_scope: null,// 营业范围
        business_img: null,// 营业执照
        remark: null,// 备注,
        resource:this.form1.resource,//被保企业
        stime: null,//生效日期
        etime: null,//生效日期
      };
      this.resetForm("form");
    },
    getList() {
      get_policy_holder(this.queryParams).then(response => {
        // console.log('查询所有数据', response)
        if (response.code == 1) {
          this.employerList = response.data.list;
          this.total = response.data.count;
        }
      });
    },
    getList1() {
      get_policy_holder(this.queryParams1).then(response => {
        // console.log('查询所有数据', response)
        if (response.code == 1) {
          this.employerList1 = response.data.list;
          // this.total = response.data.count;
        }
      });
    },
    search(e) {
      // console.log('34345', e)
      this.queryParams.name = e;
      this.getList();

    },
    //选择保单时下拉刷新加载数据
    loadMore() {
      this.queryParams.pageSize += 10
      // console.log('2342353',this.queryParams1)
      this.getList();
    },
    //获取企业名称
    getSelect(item) {
      this.forms.company_id=item.id;
      if(this.form1.resource=='同投保企业'){
        this.forms.by_company_id=this.forms.company_id
      }

      var obj = {
        id: item.id,
        type: 1
      }

      // console.log('企业名称', item)
      get_edit_company(obj).then(response => {
        // console.log('详情', response)
        // this.form = response.data;
        this.form.name = response.data.name;
        this.form.credit_no = response.data.credit_no;
        this.form.contact = response.data.contact;
        this.form.phone = response.data.phone;
        this.form.mail_address = response.data.mail_address;
        this.form.email_code = response.data.email_code;
        this.form.email = response.data.email;
        this.form.business_scope = response.data.business_scope;


      });

    },
    search1(e) {
      this.queryParams1.name = e;
      this.getList1();

    },
    //选择保单时下拉刷新加载数据
    loadMore1() {
      this.queryParams1.pageSize += 10
      // console.log('2342353',this.queryParams1)
      this.getList1();
    },
    //获取企业名称
    getSelect1(item) {
      this.forms.by_company_id=item.id;
      var obj = {
        id: item.id,
        type: 1
      }

      // console.log('企业名称', item)
      get_edit_company(obj).then(response => {
        // console.log('详情', response)
        this.form1.name = response.data.name;
        this.form1.credit_no = response.data.credit_no;
        this.form1.contact = response.data.contact;
        this.form1.phone = response.data.phone;
        this.form1.mail_address = response.data.mail_address;
        this.form1.email_code = response.data.email_code;
        this.form1.email = response.data.email;
        this.form1.business_scope = response.data.business_scope;
        // this.form1=this.form1.resource

      });

    },
    //点击提交按钮
    getSubmit(){
      console.log('forms',this.forms)
      if(this.form1.stime==null){
        this.$message({
          showClose: true,
          message: '请选择生效日期',
          type: 'error'
        });
        this.$refs['stime'].focus();
      }else  if(this.form1.etime==null){
        this.$message({
          showClose: true,
          message: '请选择有效日期',
          type: 'error'
        });
        this.$refs['etime'].focus();
      }else if(this.form1.resource=='非投保企业'){
         if (this.form1.name==null){
           this.$message({
             showClose: true,
             message: '请选择投保企业全称',
             type: 'error'
           });
           this.$refs['name1'].focus();

         }else {
           this.getInsurance();
         }

      }else{
        this.getInsurance();
        // console.log('235365')
      }

      //id=7
      //
    },
    getInsurance(){
      creat_insurance(this.forms).then(res=>{
        // console.log('生成保单',res)
        if(res.code==1){
          var obj={
            pid:this.pid,
            bid:res.data
          }
          localStorage.setItem('PolicyID',res.data)
          this.$router.push({
            name:'dataUpload',
            query:{
              programme:obj
            }
          })
        }
        //   console.log('res',res);
        })
    }
  },
  created() {
    this.reset();
    this.queryParams.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    this.forms.user_id=JSON.parse(localStorage.getItem('userInfo')).userId
    this.queryParams1.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    var info = JSON.parse(localStorage.getItem('userInfo'));
    if (info.roles.length != 0) {
      this.queryParams.role_id = info.roles[0].roleId
      this.queryParams1.role_id = info.roles[0].roleId
    }
    //获取方案id
    var ids = this.$route.query.ids;
    if (ids.id != undefined) {
      this.forms.plan_id = ids.id
      this.pid=ids.id;
    }
    this.getList();
    this.getList1();


    // console.log('pid', this.pid)
    // console.log('iid', ids.id)
  }
}
</script>

<style scoped>
.insure{
  background: #F8FBFF;
  padding:30px;
  border-radius: 10px;
  box-sizing: border-box;
}
</style>
